<template>
  <el-dialog
    title="详情"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="visible"
    lock-scroll
    width="900px"
  >
    <el-form ref="elForm" :model="dataForm" label-width="100px" label-position="right">
      <template v-if="!loading">
        <el-col :span="12">
          <el-form-item label="委托单位" prop="customerName">
            {{ dataForm.customerName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建筑名称" prop="name">
            {{ dataForm.name }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建筑类型" prop="buildingType">
            {{ buildingTypeFormat(dataForm.buildingType) }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建筑结构" prop="buildingStructure">
            {{ buildingStructureFormat(dataForm.buildingStructure) }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="耐火等级" prop="fireResistanceLevel">
            {{ dataForm.fireResistanceLevel }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="危险等级" prop="hazardLevel">
            {{ dataForm.hazardLevel }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="消控室" prop="fireControlRoom">
            {{ dataForm.fireControlRoom == "1" ? "有" : "无" }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="使用性质" prop="natureOfUse">
            {{ dataForm.natureOfUse }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地上层数" prop="abovegroundNumber">
            {{ dataForm.abovegroundNumber }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建筑高度" prop="height">
            {{ dataForm.height }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地下层数" prop="undergroundNumber">
            {{ dataForm.undergroundNumber }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建筑面积" prop="area">
            {{ dataForm.area }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="建筑详细地址" prop="address">
            {{ dataForm.address }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地图标点描述" prop="pointPositionDesc">
            {{ dataForm.pointPositionDesc }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="categoryid">
            {{ dataForm.remark }}
          </el-form-item>
        </el-col>
      </template>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getBuilding } from "@/api/system/building";
import { getDicts } from "@/api/system/dict/data";
export default {
  props: [],
  data() {
    return {
      visible: false,
      loading: false,

      dataForm: {},
      buildTypeList: [], // 建筑类型列表
      buildStructureList: [], // 建筑结构列表
      fireLevelList: [
        // 耐火等级/危险等级
        { value: "1级" },
        { value: "2级" },
        { value: "3级" },
        { value: "4级" },
      ],
    };
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          this.getBuildingTypes();
          this.getBuildStructures();
          getBuilding(id).then((res) => {
            this.dataForm = res.data;
            this.loading = false;
          });
        }
      });
    },
    // 获取建筑类型列表
    getBuildingTypes() {
      getDicts("sys_building_class").then((res) => {
        this.buildTypeList = res.data;
      });
    },
    // 获取建筑结构列表
    getBuildStructures() {
      getDicts("sys_buding_structure").then((res) => {
        this.buildStructureList = res.data;
      });
    },
    // 格式化建筑类型
    buildingTypeFormat(value) {
      const type = this.buildTypeList.find((i) => i.dictValue == value)?.dictLabel;
      return type;
    },
    // 格式化建筑结构
    buildingStructureFormat(value) {
      const structure = this.buildStructureList.find((i) => i.dictValue == value)
        ?.dictLabel;
      return structure;
    },
  },
};
</script>
